<template>
	<view class="container">
		<view class="header">学生的个人主页</view>
		<view class="profile">
			<view class="name">{{stuName}}</view>
			<view class="score">总分：{{ scoreAll }}分</view>
		</view>
		<view class="activities">
			<view class="activity-title">可选加分活动</view>
			<checkbox-group @change="onCheckboxChange">
				<view class="activity" v-for="activity in activities" :key="activity.id">
					<label>
						<checkbox :value="activity.name" :checked="activity.name === selectedActivity">{{activity.name}}
						</checkbox>
					</label>
					<view style="display: flex;">
						<button class="edit-button" @click="editActivity(activity)">编辑</button>
						<button class="warn-button" @click="deleteActivity(activity)">删除</button>
					</view>
				</view>
			</checkbox-group>
			<button class="add-activity-button" @click="addActivity">新增分数项</button>
		</view>
		<view class="actions">
			<button class="action-button decrease" @click="openScorePopup('decrease')">我要减分</button>
			<button class="action-button increase" @click="openScorePopup('increase')">我要加分</button>
		</view>
		<view class="activities">
			<view class="activity-title">加分明细</view>
			<view class="activity" v-for="(score,index) in scores" :key="score.id">
				<view>{{(index+1)+"."}}{{score.scoreName}}</view>
				
				<view>
					{{score.role==1?"+":"-"}}{{score.score}}
				</view>
			</view>
		</view>

		<view v-if="showScorePopup" class="score-popup" @click="closeScorePopup">
			<view class="score-popup-content" @click.stop>
				<view class="score-option" v-for="n in 5" :key="n" @click="selectScore(n * scoreChangeDirection)">
					{{ n * scoreChangeDirection }}分
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		globalVariable
	} from '../../configMy.js';
	export default {
		data() {
			return {
				activities: [],
				scoreAll: 0,
				selectedActivity: '',
				showScorePopup: false,
				scoreChangeDirection: 1,
				stuName: "",
				studentId: 0,
				activities2: [],
				scores: []
			};
		},
		onLoad(e) {
			this.stuName = e.stuName;
			this.studentId = e.studentId;
			let that = this;
			//获取所有的记录
			uni.request({
				url: globalVariable + "/getScoresByStudentId?studentId=" + that.studentId,
				success(res) {
					let info = res.data;
					uni.showToast({
						title: info.message
					})
					that.scores = info.data
					
					that.scores.forEach(score=>{
						console.log(score)
						if(score.role==1){
							that.scoreAll+=score.score
						}
						else{
							that.scoreAll-=score.score
						}
					})
				}
			})
			
		},
		created() {
			// 页面加载时从缓存中读取加分项
			const cachedActivities = uni.getStorageSync('activities');
			if (cachedActivities) {
				this.activities = JSON.parse(cachedActivities);
			} else {
				// 默认加分项
				this.activities = [{
						id: 1,
						name: '英语单词检查'
					},
					{
						id: 2,
						name: '数学做题情况'
					}
				];
				this.saveActivitiesToStorage();
			}
		},
		methods: {
			onCheckboxChange(event) {
				this.activities2 = event.detail.value
				if (event.detail.value.length > 1) {
					uni.showToast({
						title: "请选择一个标签"
					});
					return;
				} else {
					const value = event.detail.value[0]; // 获取选中的第一个值
					this.selectedActivity = value;
				}
			},
			saveActivitiesToStorage() {
				// 将加分项存入缓存
				uni.setStorageSync('activities', JSON.stringify(this.activities));
			},
			editActivity(activity) {
				const newName = prompt('编辑活动名称:', activity.name);
				if (newName) {
					const index = this.activities.findIndex(a => a.id === activity.id);
					if (index !== -1) {
						this.activities[index].name = newName;
						this.saveActivitiesToStorage(); // 更新后保存到缓存
					}
				}
			},
			deleteActivity(activity) {
				this.activities = this.activities.filter(a => a.id !== activity.id);
				if (this.selectedActivity === activity.name) {
					this.selectedActivity = '';
				}
				this.saveActivitiesToStorage(); // 删除后保存到缓存
			},
			addActivity() {
				const newActivity = prompt('请输入新的分数项名称:');
				if (newActivity) {
					this.activities.push({
						id: this.activities.length + 1,
						name: newActivity
					});
					this.saveActivitiesToStorage(); // 添加后保存到缓存
				}
			},
			openScorePopup(direction) {
				this.scoreChangeDirection = direction === 'increase' ? 1 : -1;
				this.showScorePopup = true;
			},
			closeScorePopup() {
				this.showScorePopup = false;
			},
			selectScore(amount) {
				let that = this;
				let role = 1;
				if (amount < 0) {
					role = 0;
					amount = -1 * amount;
				}
				if (that.selectedActivity == "" || that.selectedActivity == null) {
					uni.showToast({
						title: "请选择一个标签"
					})
					return
				}
				if (that.activities2.length > 1) {
					uni.showToast({
						title: "请最多选择一个标签"
					})
					return
				}

				uni.request({
					url: globalVariable + "/updateScore?studentId=" + that.studentId + "&studentName=" + that
						.stuName + "&score=" + amount + "&scoreName=" + that.selectedActivity + "&role=" + role,
					success(res) {
						that.showScorePopup = false;
						uni.showToast({
							title: res.data.message
						})
						if(role==1){
							that.scoreAll+=amount;
						}
						else{
							that.scoreAll-=amount;
						}
						that.scores.push({"scoreName":that.selectedActivity,"role":role,"score":amount})
					}
				})
			}
		}
	};
</script>


<style>
	.container {
		padding: 20px;
		background-color: #f5f5f5;
	}

	.header {
		text-align: center;
		font-size: 24px;
		font-weight: bold;
		margin-bottom: 20px;
		color: #333;
	}

	.profile {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #fff;
		padding: 10px 20px;
		border-radius: 10px;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
		margin-bottom: 20px;
	}

	.name {
		font-size: 18px;
		font-weight: bold;
	}

	.score {
		font-size: 18px;
		color: #ff5722;
	}

	.activities {
		background-color: #fff;
		padding: 20px;
		border-radius: 10px;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
		margin-bottom: 20px;
	}

	.activity-title {
		font-size: 18px;
		font-weight: bold;
		margin-bottom: 10px;
	}

	.activity {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10px;
	}

	.edit-button {
		background-color: #4caf50;
		color: #fff;
		border: none;
		/* padding: 5px 10px; */
		border-radius: 5px;
		cursor: pointer;

	}

	.warn-button {
		background-color: #df282b;
		color: #fff;
		border: none;
		/* padding: 5px 10px; */
		border-radius: 5px;
		cursor: pointer;
		margin-left: 10rpx;
	}

	.add-activity-button {
		background-color: #2196f3;
		color: #fff;
		border: none;
		padding: 10px 20px;
		border-radius: 5px;
		cursor: pointer;
		width: 100%;
		text-align: center;
	}

	.actions {
		display: flex;
		justify-content: space-between;
		margin-bottom: 30rpx;
	}

	.action-button {
		width: 48%;
		padding: 10px 0;
		font-size: 16px;
		border: none;
		border-radius: 5px;
		cursor: pointer;
	}

	.decrease {
		background-color: #f44336;
		color: #fff;
	}

	.increase {
		background-color: #4caf50;
		color: #fff;
	}

	.score-popup {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.score-popup-content {
		background: #fff;
		padding: 20px;
		border-radius: 10px;
		display: flex;
		justify-content: space-around;
		width: 80%;
		/* height: 30%; */
	}

	.score-option {
		background: #37c0ff;
		color: #fff;
		padding: 10px 20px;
		border-radius: 10px;
		cursor: pointer;
		font-size: 16px;
		text-align: center;
		margin: 10rpx;
	}
</style>